<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue3应用的代码结构</title>
</head>
<body>

<div id="app">
    <div>
        工号：<input type="text" v-model="obj.e_id" />
    </div>
    <div>
        姓名：<input type="text" v-model="obj.e_name"/>
    </div>
    <div>

        工资：<input type="number" v-model="obj.e_sal" />
    </div>
    <div>
        入职日期：<input type="date" v-model="obj.e_date" />
    </div>

    {{obj}}

</div>




<script src="js/vue.global.js" ></script>

<script>
    //创建了Vue对象的构造配置
    const app = {

        setup(){

            //reactive也是一个响应式包装函数，适合于包装复杂对象
            const obj = Vue.reactive({
                e_id:'009',
                e_name:'',
                e_sal:'',
                e_date:''
            });

            return {
                obj,
            };
        }
    };

    //创建Vue对象，并将Vue对象与指定的视图元素绑定
    Vue.createApp(app).mount('#app');


</script>

</body>
</html>